@import shared.VarTool
@()
	@mainWithSearch("Relative tissue/cell origin proportions") {

		<style>

				.myImgP {
					overflow-y: auto;
				}

				.detailTable > thead > tr > th, .detailTable > tbody > tr > th, .detailTable > tfoot > tr > th, .detailTable > thead > tr > td, .detailTable > tbody > tr > td, .detailTable > tfoot > tr > td {
					vertical-align: middle;
					text-align: center;
				}

				.myTr:hover .myA {
					color: #c0edf1;
				}

				.myA {
					color: #ffffff;
				}

				a:active, a:hover {
					outline: 0;
					text-decoration: none;
				}

		</style>

		<div class="panel panel-default">
			<div class="panel-heading">
				<h3 class="panel-title"><span class="fa fa-flag"></span> Relative tissue/cell origin proportions</h3>
			</div>
			<div class="panel-body">

				<form class="form-horizontal" action="@routes.MrnaController.toResultByName" method="post" id="form">

					<div class="form-group">
						<label class="control-label col-sm-2">Dataset selection:</label>
						<div class="col-sm-4">
							<select class="form-control myKind" name="kind" style="width: 100%">
							</select>
						</div>
					</div>

					<div class="form-group">
						<div class="actions col-sm-offset-2 col-sm-3">
							<button type="button" class="btn btn-primary myRun" style="width: 90%;" id="search" >
								Run</button>
						</div>
					</div>

				</form>

				<hr>

				<div class="row">

					<div class="col-sm-6">

						<div class="myCharts" align="center" id="@VarTool.tissueKind">

							<h4>Tissue cells</h4>

							<div style="float: right">

								<div class="btn-group" style="margin-bottom: 5px">
									<a class="btn  btn-default idsButton" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-close-others="true" aria-expanded="false"
									>
										<i class="fa fa-bars"></i>
									</a>
									<ul class="dropdown-menu pull-right">

										<li>
											<a href="javascript:;" onclick="Tool.downloadImage(this, 'png')">
												Download PNG image
											</a>
										</li>

										<li>
											<a href="javascript:;" onclick="Tool.downloadImage(this, 'jpeg')">
												Download JPEG image
											</a>
										</li>
										<li>
											<a href="javascript:;" onclick="Tool.downloadImage(this, 'pdf')">
												Download PDF image
											</a>
										</li>
										<li>
											<a href="javascript:;" onclick="Tool.downloadImage(this, 'svg')">
												Download SVG image
											</a>
										</li>

									</ul>
								</div>

								<div>

									<a href="#" class="btn  btn-default" title="Export data" >
										<i style="width: 12px" class="glyphicon glyphicon-export"></i>
									</a>

								</div>

							</div>

							<div class="myImgP">
								<input type="hidden" name="pdfBase64">
								<img src="" id="tissueImage" style="width: 100%">
							</div>

						</div>

					</div>

					<div class="col-sm-6">

						<div class="myCharts" align="center" id="@VarTool.bloodKind">

							<h4>Blood cells</h4>

							<div style="float: right">

								<div class="btn-group" style="margin-bottom: 5px">
									<a class="btn  btn-default idsButton" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-close-others="true" aria-expanded="false"
									>
										<i class="fa fa-bars"></i>
									</a>
									<ul class="dropdown-menu pull-right">

										<li>
											<a href="javascript:;" onclick="Tool.downloadImage(this, 'png')">
												Download PNG image
											</a>
										</li>

										<li>
											<a href="javascript:;" onclick="Tool.downloadImage(this, 'jpeg')">
												Download JPEG image
											</a>
										</li>
										<li>
											<a href="javascript:;" onclick="Tool.downloadImage(this, 'pdf')">
												Download PDF image
											</a>
										</li>
										<li>
											<a href="javascript:;" onclick="Tool.downloadImage(this, 'svg')">
												Download SVG image
											</a>
										</li>

									</ul>
								</div>

								<div>

									<a href="#" class="btn  btn-default" title="Export data" >
										<i style="width: 12px" class="glyphicon glyphicon-export"></i>
									</a>

								</div>

							</div>

							<div class="myImgP" style="">
								<input type="hidden" name="pdfBase64">
								<img src="" id="bloodImage" style="width: 100%">
							</div>

						</div>

					</div>

				</div>

				<hr>

				<h4>Selected dataset</h4>

				<table class="display table table-bordered" id="table" data-pagination="true" data-search="true"
				data-page-list="[10, 25, 50, 100, all]" data-multiple-search="true"
				style="word-wrap: break-word">
					<tbody></tbody>
				</table>

			</div>
		</div>

		<div id="modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog" style="width: 800px">
				<div class="modal-content">
					<div class="modal-header bg-primary">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true" >
							<i class="fa fa-remove"></i>
						</button>
						<h4 class="modal-title">
							<span id="lblAddTitle" style="font-weight: bold"></span>
						</h4>
					</div>

					<div class="modal-body">

						<h4>Image Result</h4>

						<div class="myCharts" align="center" id="@VarTool.tissueKind">

							<div style="float: right">

								<a href="#" class="btn  btn-default" title="Export data" >
									<i style="width: 12px" class="glyphicon glyphicon-export"></i>
								</a>

								<div class="btn-group" >
									<a class="btn  btn-default idsButton" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-close-others="true" aria-expanded="false"
									>
										<i class="fa fa-bars"></i>
									</a>
									<ul class="dropdown-menu pull-right">

										<li>
											<a href="javascript:;" onclick="Tool.downloadImage(this, 'png')">
												Download PNG image
											</a>
										</li>

										<li>
											<a href="javascript:;" onclick="Tool.downloadImage(this, 'jpeg')">
												Download JPEG image
											</a>
										</li>
										<li>
											<a href="javascript:;" onclick="Tool.downloadImage(this, 'pdf')">
												Download PDF image
											</a>
										</li>
										<li>
											<a href="javascript:;" onclick="Tool.downloadImage(this, 'svg')">
												Download SVG image
											</a>
										</li>

									</ul>
								</div>

							</div>

							<div class="myImgP">
								<input type="hidden" name="pdfBase64">
								<img src="" id="tissueImage" style="width: 100%">
							</div>

						</div>

						<div class="myCharts" align="center" id="@VarTool.bloodKind">

							<div style="float: right">

								<a href="#" class="btn  btn-default" title="Export data" >
									<i style="width: 12px" class="glyphicon glyphicon-export"></i>
								</a>

								<div class="btn-group" >
									<a class="btn  btn-default idsButton" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-close-others="true" aria-expanded="false"
									>
										<i class="fa fa-bars"></i>
									</a>
									<ul class="dropdown-menu pull-right">

										<li>
											<a href="javascript:;" onclick="Tool.downloadImage(this, 'png')">
												Download PNG image
											</a>
										</li>

										<li>
											<a href="javascript:;" onclick="Tool.downloadImage(this, 'jpeg')">
												Download JPEG image
											</a>
										</li>
										<li>
											<a href="javascript:;" onclick="Tool.downloadImage(this, 'pdf')">
												Download PDF image
											</a>
										</li>
										<li>
											<a href="javascript:;" onclick="Tool.downloadImage(this, 'svg')">
												Download SVG image
											</a>
										</li>

									</ul>
								</div>

							</div>

							<div class="myImgP" style="">
								<input type="hidden" name="pdfBase64">
								<img src="" id="bloodImage" style="width: 100%">
							</div>

						</div>

						<h4>Data</h4>

						<div id="detailData" class="form-inline" style=""></div>

					</div>


				</div>
			</div>
		</div>

		<script>

				$(function () {

					Proportion.init

				})

		</script>


	}